<!-- 商城 - 单张优惠券展示组件 -->
<template>
	<view
		class="vk-mall-user-coupon list-item"
		:class="{ 'coupon-lose': disableCom ? true : false }"
	>
		<view class="content" @click="click">
			<view class="left">
				<view class="discounts">
					<block v-if="coupon.type === 1">
						<text class="min">￥</text>
						<text class="max">{{
							parseFloat(vk.pubfn.priceFilter(coupon.coupon_rule.discount_amount))
						}}</text>
					</block>
					<block v-if="coupon.type === 2">
						<text class="max">{{
							vk.pubfn.discountFilter(coupon.coupon_rule.discount_proportion)
						}}</text>
					</block>
				</view>
				<view class="full-reduction">{{ typeCom }}</view>
			</view>
			<view class="right">
				<view class="info-title">{{ reductionCom }}</view>
				<view class="date-get">
					<view class="date">
						生效时间：{{
							vk.pubfn.timeFormat(
								coupon.effective_time_rule.start_fixed_time,
								"yyyy-MM-dd hh:mm"
							)
						}}
					</view>
					<view
						class="get"
						v-if="!coupon.receiveRes || coupon.receiveRes.status == 0"
						@click="receiveCoupon"
					>
						<text v-if="coupon.receive_rule.mode == 1 && coupon.receive_rule.integral">
							{{ coupon.receive_rule.integral }}积分兑换
						</text>
						<text v-else>立即领取</text>
					</view>
					<view
						class="get"
						v-else-if="coupon.receiveRes.status == 1"
						@click="pageToGoodsList"
					>
						<text>立即使用</text>
					</view>
					<view class="get" v-else-if="coupon.receiveRes.status == -1">
						<text>{{ coupon.receiveRes.msg }}</text>
					</view>
					<view class="get" v-else-if="coupon.receiveRes.status == -2">
						<u-count-down
							:timestamp="coupon.receive_start_time_diff"
							@change="countDownChange($event, coupon)"
							@finish="coupon.receiveRes.status = 0"
						>
							<text>{{ coupon.receive_start_time_str }}后</text>
						</u-count-down>
					</view>
				</view>
				<view class="describe-title">
					<text>详细信息</text>
					<view @click.stop="footerActived = !footerActived">
						<u-icon name="arrow-down" v-if="footerActived"></u-icon>
						<u-icon name="arrow-up" v-else></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="collapse" :class="footerActived ? 'actived' : ''">
			<view>优惠券名称：{{ coupon.name }}</view>
			<view>最早可领取时间：{{ vk.pubfn.timeFormat(coupon.receive_start_time) }}</view>
			<view>最晚可领取时间：{{ vk.pubfn.timeFormat(coupon.receive_end_time) }}</view>
			<view>最多可领取：{{ coupon.limit }} 张</view>
			<view>{{ effectiveTimeRuleCom }}</view>
			<view>使用说明：{{ coupon.describe }}</view>
		</view>
	</view>
</template>

<script>
export default {
	name: "vk-mall-user-coupon",
	props: {
		// 优惠券信息
		coupon: {
			Type: Object,
			default() {
				return {}
			}
		}
		// /**
		//  * 模式
		//  * receive 显示领取按钮
		//  * list 显示立即使用按钮
		//  * default 不显示功能按钮
		//  */
		// mode:{
		// 	Type:String,
		// 	default:""
		// }
	},
	data() {
		return {
			// 每一项底部的拓展按钮
			footerActived: false
		}
	},
	methods: {
		click() {
			let that = this
			let { coupon } = that
			that.$emit("click", { coupon })
		},
		// 领取优惠券
		receiveCoupon() {
			let that = this
			let { coupon } = that
			vk.callFunction({
				url: "client/user.receiveCoupon",
				title: "领取中...",
				data: {
					coupon_id: coupon._id
				},
				success: () => {
					vk.confirm("领取成功", "提示", "立即使用", "等会使用", res => {
						if (res.confirm) that.pageToGoodsList()
					})
					that.$set(coupon, "receiveRes", { status: 1 })
				}
			})
		},
		pageToGoodsList() {
			vk.navigateTo(`/pages/index/index`)
		},
		countDownChange(e, coupon) {
			let str = ``
			if (e.days) {
				e.hours += e.days * 24
			}
			str += e.hours < 10 ? `0${e.hours}时` : `${e.hours}时`
			str += e.minutes < 10 ? `0${e.minutes}分` : `${e.minutes}分`

			this.$set(coupon, "receive_start_time_str", str)
		}
	},
	computed: {
		reductionCom() {
			let that = this
			let { vk, coupon } = that
			let str = ""
			let min_amount = parseFloat(vk.pubfn.priceFilter(coupon.coupon_rule.min_amount))
			if (coupon.type === 1) {
				let discount_amount = parseFloat(
					vk.pubfn.priceFilter(coupon.coupon_rule.discount_amount)
				)
				str = `满${min_amount}元减${discount_amount}元`
			} else if (coupon.type === 2) {
				let discount_proportion = vk.pubfn.discountFilter(
					coupon.coupon_rule.discount_proportion
				)
				str = `满${min_amount}元打${discount_proportion}`
			}
			return str
		},
		typeCom() {
			let that = this
			let { coupon } = that
			let arr = ["", "满减券", "折扣券", "随机金额券", "商品兑换券", "通用券"]
			return arr[coupon.type]
		},
		effectiveTimeRuleCom() {
			let that = this
			let { vk, coupon } = that
			let { effective_time_rule } = coupon
			let {
				type,
				start_fixed_time,
				end_fixed_time,
				start_dynamic_time,
				end_dynamic_time
			} = effective_time_rule

			let str = ""
			if (type === 0) {
				let s = vk.pubfn.timeFormat(start_fixed_time, "yyyy-MM-dd hh:mm")
				let e = vk.pubfn.timeFormat(end_fixed_time, "yyyy-MM-dd hh:mm")
				str = `有效期：${s} 至 ${e}`
			} else {
				if (start_dynamic_time === 0) {
					str = `领取后${end_dynamic_time}天内可用`
				} else {
					str = `领取${start_dynamic_time}天后才生效，有效期${end_dynamic_time}天`
				}
			}
			return str
		},
		disableCom() {
			let that = this
			let { coupon } = that
			return coupon.receiveRes && coupon.receiveRes.status < 0 ? true : false
		}
	}
}
</script>

<style lang="scss" scoped>
/* list-item开始 */
.list-item {
	margin: 0 20rpx 20rpx;
	overflow: hidden;
	> .content {
		padding: 0;
		color: #606266;
		display: flex;
		align-items: center;
		position: relative;
		> .left {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 164rpx;
			height: 196rpx;
			background: url("https://mp-d0bdc000-db91-44a8-852b-e6f607a7ca19.cdn.bspapp.com/cloudstorage/4bc5b142-2214-4fdb-b03f-0e2bd6801856.png")
				no-repeat center;
			background-size: 100% 100%;
			.discounts {
				display: flex;
				justify-content: center;
				align-items: baseline;
				width: 100%;
				line-height: 80rpx;
				.min {
					color: #ffffff;
					font-size: 28rpx;
				}
				.max {
					font-size: 68rpx;
					color: #ffffff;
					font-weight: bold;
				}
			}
			.full-reduction {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				font-size: 12px;
				color: #ffffff;
			}
		}
		> .right {
			flex: 1;
			height: 196rpx;
			padding: 24rpx;
			background: url("https://mp-d0bdc000-db91-44a8-852b-e6f607a7ca19.cdn.bspapp.com/cloudstorage/4359baa4-6f7b-45f5-85c1-e6b5b361ea90.png")
				no-repeat center;
			background-size: 100% 100%;
			.info-title {
				display: flex;
				width: 100%;
				font-size: 30rpx;
				font-weight: bold;
				line-height: 30rpx;
			}
			.date-get {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 94rpx;
				border-bottom: 2rpx dashed #eeeeee;
				.date {
					flex: 1;
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #555555;
				}
				.get {
					text {
						padding: 10rpx 20rpx;
						background-color: #fc6d18;
						color: #ffffff;
						font-size: 24rpx;
						border-radius: 100rpx;
					}
					text:active {
						filter: grayscale(50%);
					}
					.use {
						background-color: transparent;
						border: 1px solid #fc6d18;
						color: #fc6d18;
					}
				}
			}
			.describe-title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 40rpx;
				text {
					color: #555555;
					font-size: 24rpx;
				}
				.more {
					transform: rotate(90deg);
				}
			}
		}
	}
	.collapse {
		display: none;
		padding: 20rpx;
		font-size: 24rpx;
		color: #909399;
		line-height: 40rpx;
		background-color: #ffffff;
		border-top: 1px solid #f8f8fa;
	}
	.collapse.actived {
		display: block;
	}
}

.list-item.coupon-lose {
	filter: grayscale(100%);
}
</style>
